<template>
	<view class="height-screen">
		<cu-custom isBack bgColor="bg-white">
			<block slot="content">{{$t('filed.geren')}}</block>
		</cu-custom>
		<view class="bg-white radius-xs padding-lr" style="margin: 25rpx;">
			<u-form labelPosition="left" labelWidth="125" :model="form" ref="uForm">
				<u-form-item :label="$t('filed.avatar')" borderBottom>
					<view class="flex justify-end">
						<button style="width: 66rpx;height: 66rpx;margin: 0;padding: 0;border-radius: 50%;"
							@tap.stop="avatarUpload">
							<image :src="helper.handleImage(form.avatar)" style="width: 66rpx;height: 66rpx;"
								class="round" />
						</button>
					</view>
				</u-form-item>
				<u-form-item :label="$t('filed.nicheng')" borderBottom>
					<u-input v-model="form.nickname" border="none" :placeholder="$t('public.placeholderContent')"
						inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item :label="$t('filed.sex')" borderBottom @click="showSex = true;">
					<view class="flex" @click="showSex = true">
						<u-input v-model="form.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="none" inputAlign="right" readonly></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</view>
				</u-form-item>
				<u-form-item :label="$t('filed.email')">
					<u-input v-model="form.email" border="none" :placeholder="$t('public.placeholderContent')"
						inputAlign="right"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view style="position: fixed;bottom: 60rpx;left: 25rpx;right: 25rpx;">
			<view class="setButton" style="height: 90rpx;background: #06C168;border-radius: 40rpx;"
				@tap.stop="userEdit">
				<text class="font-400 text-df text-white">{{$t('public.release')}}</text>
			</view>
		</view>
		<u-action-sheet :show="showSex" :actions="actions" @close="showSex = false" @select="sexSelect"
			safeAreaInsetBottom />
		<!-- <Authorize ref="authorize" /> -->
	</view>
</template>

<script>
	import Authorize from '@/components/authorize/index.vue'
	import {
		clearPermissionStorageKey
	} from '@/components/authorize/index.js'
	import {
		getInfo,
		userEdit
	} from '@/apis'
	export default {
		components: {
			Authorize
		},
		data() {
			return {
				form: {
					nickname: "",
					avatar: "",
					gender: '',
					email: ''
				},
				showSex: false,
				actions: [{
						name: this.$t('filed.boy'),
					},
					{
						name: this.$t('filed.girl'),
					}
				],
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				const res = await getInfo()
				this.form = {
					nickname: res.nickname,
					avatar: res.avatar,
					gender: res.gender == 0 ? this.$t('filed.girl') : this.$t('filed.boy'),
					email: res.email
				}
			},
			sexSelect(e) {
				this.form.gender = e.name
			},
			// handelAuthorize() {
			// 	this.$refs.authorize.showView('CAMERA_STORAGE', this.avatarUpload)
			// },
			async avatarUpload() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						var filesPath = res.tempFilePaths[0]
						const url = await this.helper.uploadImage(
							'https://www.slem.com.au/api/common/upload',
							filesPath)
						this.form.avatar = url
					},
				})
			},
			async userEdit() {
				await userEdit({
					nickname: this.form.nickname,
					avatar: this.form.avatar,
					gender: this.form.gender == this.$t('filed.girl') ? 0 : 1,
					email: this.form.email
				})
				this.helper.showToast(this.$t('message.success'))
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>